<template>
    <div class="common-layout">
        <el-container class="container">
            <!-- 侧边栏 -->
            <el-aside width="200px"><AppNav></AppNav></el-aside>
            <!-- 内容区 -->
            <el-container>
                <!-- 头部面包屑 -->
                <el-header style="background-color: white;"><AppHeader></AppHeader></el-header>
                <el-main style="margin: 20px;background-color: white;">
                    <router-view></router-view>
                </el-main>
                <!-- <el-footer>Footer</el-footer> -->
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import AppNav from '../../components/AppNav.vue';
import AppHeader from '../../components/AppHeader.vue';

</script>

<style scoped>
.common-layout {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(227, 227, 227);
}
.container{
    width: 100%;
    height: 100%;
}
</style>